<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot集成Thymeleaf</title>
</head>

<body th:inline="text">

<p th:text="${data}">

</p>

[[${data}]]

展示user对象的数据（标准标量表达式）<br/>
<p>
    <span th:text="${user.id}"> </span>
    <span th:text="${user.nick}"> </span>
    <span th:text="${user.phone}"> </span>
    <span th:text="${user.email}"> </span>
    <span th:text="${user.address}"> </span>
</p>

展示user对象的数据（选择表里表达式）<br/>
<p th:object="${user}">
    <span th:text="*{id}"> </span>
    <span th:text="*{nick}"> </span>
    <span th:text="*{phone}"> </span>
    <span th:text="*{email}"> </span>
    <span th:text="*{address}"> </span>
</p>

展示user对象的数据（标准标量表达式 和 选择表里表达式 可以混合在一起使用）<br/>
<p th:object="${user}">
    <span th:text="*{id}"> </span>
    <span th:text="${user.nick}"> </span>
    <span th:text="*{phone}"> </span>
    <span th:text="*{email}"> </span>
    <span th:text="${user.address}"> </span>
</p>

展示user对象的数据（选择表里表达式 不选择对象，直接*获取也可以）<br/>
<p>
    <span th:text="*{user.id}"> </span>
    <span th:text="*{user.nick}"> </span>
    <span th:text="*{user.phone}"> </span>
    <span th:text="*{user.email}"> </span>
    <span th:text="*{user.address}"> </span>
</p>

URL表达式 <br/>
<p>
    <a th:href="@{'http://xxx/boot/info?id='+${user.id}}">查看</a>

    <a th:href="@{'user/info?id='+${user.id}}">查看</a>

    <a th:href="@{'/user/info?id='+${user.id}}">查看</a>

    <a href="@{'/user/info?id='+${user.id}}">查看</a>

    <a href="/user/info?id=1">查看</a>
</p>

thymeleaf的常见属性<br/>
<p>
    如果你的属性中要显示后台的动态变量数据，那么你不得不使用th:开头的属性<br/>
    <form id="login" th:action="@{/login}" th:method="post">

        <input th:id="username" th:name="username" th:value="${user.nick}">
        <input th:id="username" th:name="username" th:attr="value=${user.nick}">

    </form>

     如果你的属性中不需要显示动态数据，而是显示一个写死的静态值，那么你可以不使用th:开头的属性<br/>
    <form id="login2" action="/login" method="post">
        ......
    </form>

    <br/>

    <script th:src="@{/js/jquery-2.4.min.js}"></script>

    <img th:src="@{/image/beijing.jpg}"/>


    <span data-ref-tr-abc="用户id">

    </span>

    <span th:attr="data-ref-tr-abc=${user.id}">

    </span>

    <input type="text" id="realName" name="reaName" th:text="${user.phone}">
    <input type="text" id="realName2" name="reaName" th:value="${user.phone}">

</p>

循环展示List集合<br/>
<p>
    <span th:each="user : ${userList}">
        <span th:text="${userStat.count}"> </span>
        <span th:text="${user.id}"> </span>
        <span th:text="${user.nick}"> </span>
        <span th:text="${user.phone}"> </span>
        <span th:text="${user.email}"> </span>
        <span th:text="${user.address}"> </span>
        <br/>
    </span>
</p>

循环展示Map集合<br/>
<p>
    <span th:each="keyValue : ${userMap}">
        <span th:text="${keyValue.key}"></span>
        <span th:text="${keyValue.value.id}"></span>
        <span th:text="${keyValue.value.nick}"></span>
        <span th:text="${keyValue.value.phone}"></span>
        <span th:text="${keyValue.value.email}"></span>
        <span th:text="${keyValue.value.address}"></span>
        <br/>
    </span>
</p>

循环展示数组集合<br/>
<p>
    <span th:each="user : ${userArray}">
        <span th:text="${user.id}"> </span>
        <span th:text="${user.nick}"> </span>
        <span th:text="${user.phone}"> </span>
        <span th:text="${user.email}"> </span>
        <span th:text="${user.address}"> </span>
        <br/>
    </span>
</p>

循环展示复合集合<br/>
<p>
  <span th:each="keyValue : ${map}">
      key:<br/>
      <span th:text="${keyValue.key}"></span>
      <br/>
      value:<br/>
      <span th:each="user : ${keyValue.value}">
          <span th:text="${user.id}"> </span>
            <span th:text="${user.nick}"> </span>
            <span th:text="${user.phone}"> </span>
            <span th:text="${user.email}"> </span>
            <span th:text="${user.address}"> </span>
            <br/>
      </span>
  </span>

</p>

<p>
    <span th:if="${sex == 1}">
        性别：男
    </span>
    <span th:if="${sex == 2}">
        性别：女
    </span>

    <span th:unless="${sex == 1}">
        性别：男
    </span>
    <span th:unless="${sex == 2}">
        性别：女
    </span>

    <span th:switch="${sex}">
        <span th:case="1">男</span>
        <span th:case="2">女</span>
        <span th:case="*">----</span>
    </span>
</p>

<p>
    <span th:onclick="'myClick()'" th:style="'color:red;'">请点击我</span>
</p>


原来我们展示user对象的数据（采用 标准变量表达式）<br/>
<p>
    <span th:text="${user.id}"> </span>
    <span th:text="${user.nick}"> </span>
    <span th:text="${user.phone}"> </span>
    <span th:text="${user.email}"> </span>
    <span th:text="${user.address}"> </span>
</p>

现在我们展示user对象的数据（采用 内联文本+内联表达式）<br/>
摆脱了html的束缚，没有html标签，也可以实现数据的展示<br/>
<p>
    [[${user.id}]]
    [[${user.nick}]]
    [[${user.phone}]]
    [[${user.email}]]
    [[${user.address}]]
</p>

<p th:if="${userList == null}">
    userlist为空
</p>
<p th:if="${userList != null}">
    userlist不为空
</p>

<p>
    <a href="http://localhost:8080/api/user?id=1208&phone=1">查看</a>

    <a th:href="'http://localhost:8080/api/user?id='+${user.id}+'&phone='+${user.phone}">查看</a>

    <a th:href="|http://localhost:8080/api/user?id=${user.id}&phone=${user.phone}|">查看</a>

    <span th:text="${sex eq 1} ? '男' : '女'">未知</span>

    <span th:style="${sex eq 1} ? 'color:blue;' : 'color:red;'">颜色的展示</span>

</p>

<p>

    <span th:text="${#request.getContextPath()}"> </span>
    [[${#request.getContextPath()}]]

    [[${#session.id}]]
    [[${#session.lastAccessedTime}]]
</p>

<p>

    <span th:text="${#dates.format(nowDate, 'yyyy-MM-dd HH:mm:ss')}"></span>

    <span th:text="${#strings.substring(nowDateStr, 0, 10)}"></span>

    <span th:text="${#aggregates.avg(intArray)}"></span>
</p>

<script th:type="'text/javascript'" th:inline="javascript">
    function myClick() {
        //有了内联脚本，就可以直接在javascript代码中获取后台的动态变量数据
        var phone = [[${user.phone}]];
        alert("恭喜 " +phone+ "，抽奖成功!");
    }
</script>
</body>
</html>